<template>
	<view>
		<view class="dosageBox" v-for="(item,index) in dosageData" :key="index">
			<text class="quantityComplete">{{item.quantityComplete}}</text>
			<image class="biao" src="../../../static/task/bianhao3.png"></image>
			<text class="month">{{item.month}}&nbsp&nbsp{{item.time}}</text>
			<text class="number">+{{item.number}}</text>
			<text class="acount">￥{{item.acount}}</text>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				dosageData:[{
					quantityComplete:'数量完成自动结束',
					month:'2020-04-21',
					time:'09:30',
					number:'10',
					acount:'68.00'
				},
				{
					quantityComplete:'数量完成自动结束',
					month:'2020-04-21',
					time:'09:30',
					number:'10',
					acount:'68.00'
				},
				{
					quantityComplete:'数量完成自动结束',
					month:'2020-04-21',
					time:'09:30',
					number:'10',
					acount:'68.00'
				}]
			};
		}
	}
</script>

<style lang="scss">
     page{
		 background-color: #F1F1F1;
	 }
	 .dosageBox{
		 width:710rpx;
		 height:130rpx;
		 background:rgba(255,255,255,1);
		 border-radius:10rpx;
		 margin-top: 10rpx;
		 margin-left: 20rpx;
		 position: relative;
		 }
		 .quantityComplete{
			 font-size:28rpx;
			 font-family:PingFang SC;
			 font-weight:400;
			 color:rgba(51,51,51,1);
			 position: absolute;
			 top: 25rpx;
			 left: 20rpx;
		 }
		 .biao{
			 width: 23rpx;
			 height: 23rpx;
			 position: absolute;
			 bottom: 30rpx;
			 left: 20rpx;
		 }
		 .month{
			 font-size:24rpx;
			 font-family:PingFang SC;
			 font-weight:400;
			 color:rgba(142,142,142,1);
			 position: absolute;
			 left: 54rpx;
			 bottom: 28rpx;
		 }
		 .number{
			 font-size:28rpx;
			 font-family:PingFang SC;
			 font-weight:400;
			 color:rgba(255,59,48,1);
			 position: absolute;
			 top: 23rpx;
			 right: 29rpx;
		 }
		 .acount{
			 font-size:24rpx;
			 font-family:PingFang SC;
			 font-weight:400;
			 color:rgba(142,142,142,1);
			 position: absolute;
			 bottom: 29rpx;
			 right: 29rpx;
		 }
</style>
